<!doctype html>
<html>

<body>

<style>

    .w {
        position:absolute;width:50px;height:50px;border:1px solid black;
        font-size:12px;
        border-radius:5px;
        text-align:center;
        background-color:WhiteSmoke;
        opacity:0.7;
    }

    .container {
        position:absolute;
        width:350px;height:350px;border:2px solid gray;background-color:lightgoldenrodyellow;
    }

    #container1 { left:0;top:0; }
    #container2 { left:400px;top:0; }

</style>

<div id="holder">
    <div class="container" id="container1">
        <div class="title">container 1</div>
        <div id="c1_1" class="w" style="left:30px;top:30px">1</div>
        <div id="c1_2" class="w" style="left:230px;top:230px">2</div>
    </div>

    <div class="container" id="container2">
        <div class="title">container 2</div>
        <div id="c2_1" class="w" style="left:30px;top:30px">1</div>
        <div id="c2_2" class="w" style="left:230px;top:230px">2</div>
    </div>
</div>

<script src="../../lib/jsBezier-0.7.js"></script>
<!-- event adapter -->
<script src="../../lib/mottle-0.7.0.js"></script>
<!-- geometry functions -->
<script src="../../lib/biltong-0.2.js"></script>
<!-- drag -->
<script src="../../lib/katavorio-0.15.0.js"></script>
<!-- jsplumb util -->
<script src="../../src/util.js"></script>
<script src="../../src/browser-util.js"></script>
<!-- main jsplumb engine -->
<script src="../../src/jsPlumb.js"></script>
<!-- base DOM adapter -->
<script src="../../src/dom-adapter.js"></script>
<script src="../../src/overlay-component.js"></script>
<!-- endpoint -->
<script src="../../src/endpoint.js"></script>
<!-- connection -->
<script src="../../src/connection.js"></script>
<!-- anchors -->
<script src="../../src/anchors.js"></script>
<!-- connectors, endpoint and overlays  -->
<script src="../../src/defaults.js"></script>
<!-- bezier connectors -->
<script src="../../src/connectors-bezier.js"></script>
<!-- state machine connectors -->
<script src="../../src/connectors-statemachine.js"></script>
<!-- flowchart connectors -->
<script src="../../src/connectors-flowchart.js"></script>
<!-- SVG renderer -->
<script src="../../src/renderers-svg.js"></script>

<!-- common adapter -->
<script src="../../src/base-library-adapter.js"></script>
<!-- no library jsPlumb adapter -->
<script src="../../src/dom.jsPlumb.js"></script>
<script src="../../src/group.js"></script>
<script>
    jsPlumb.ready(function() {
        var j = jsPlumb.getInstance({Container:holder});

        j.draggable(container1);
        j.draggable(container2);
        j.draggable(c1_1, {constrain:true});
        j.draggable(c2_1, {constrain:true});
        //j.draggable(c2_1);

        j.connect({source:c1_1, target:c2_1});
        //j.addEndpoint(c1_1);
    });
</script>

</body>

</html>